<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WangEditor图片上传测试</title>
    <script src="https://unpkg.com/wangeditor@5.1.23/dist/index.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #editor { border: 1px solid #ccc; min-height: 300px; }
        .status { margin-top: 10px; padding: 10px; border-radius: 4px; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <h1>WangEditor图片上传测试</h1>
    <div id="editor"></div>
    <div id="status" class="status info">等待测试...</div>
    
    <script>
        // 设置localStorage中的token
        localStorage.setItem('token', 'test_token');
        
        const E = window.wangEditor
        const editor = new E('#editor')
        
        // 配置图片上传
        editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
            const statusEl = document.getElementById('status');
            statusEl.className = 'status info';
            statusEl.textContent = '正在上传图片...';
            
            try {
                // 创建FormData
                const formData = new FormData();
                formData.append('image', resultFiles[0]);
                
                // 调用后端API
                const response = await fetch('http://127.0.0.1:8000/api/issue_images/', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
                    }
                });
                
                if (response.ok) {
                    const result = await response.json();
                    if (result.image_url) {
                        // 插入图片到编辑器
                        insertImgFn(result.image_url);
                        statusEl.className = 'status success';
                        statusEl.textContent = `图片上传成功！URL: ${result.image_url}`;
                    } else {
                        throw new Error('服务器返回格式错误');
                    }
                } else {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
            } catch (error) {
                console.error('图片上传失败:', error);
                statusEl.className = 'status error';
                statusEl.textContent = `图片上传失败: ${error.message}`;
            }
        }
        
        editor.create();
        
        // 显示初始内容
        document.getElementById('status').textContent = '编辑器已创建，请拖拽或粘贴图片进行测试。';
    </script>
</body>
</html>